<template>
  <footer>
    <RouterLink to="/home/movies" class="footer-item">
      <span class="iconfont icon-caidan"></span>
      <p>电影/影院</p>
    </RouterLink to="">
    <RouterLink to="/home/videos" class="footer-item">
      <span class="iconfont icon-fangdajing"></span>
      <p>视频</p>
    </RouterLink to="">
    <RouterLink to="/home/show" class="footer-item">
      <span class="iconfont icon-caidan"></span>
      <p>演出</p>
    </RouterLink to="">
    <RouterLink to="/home/mine" class="footer-item">
      <span class="iconfont icon-wode"></span>
      <p>我的</p>
    </RouterLink to="">
  </footer>
</template>

<style scoped lang="less">
footer {
  position: fixed;
  border-top: 1px solid @borderColor;
  width: 375px;
  height: 49px;
  left: 0;
  bottom: 0;
  background-color: #fff;
  display: flex;

  .footer-item {
    flex: 1;
    .center();
    font-size: 10px;
    flex-direction: column;

    .iconfont {
      font-size: 20px;
    }
  }
}

.router-link-active {
  color: @themeColor;
}
</style>
